.a1{
    background: url("../images/sm-about-service11.jpg") no-repeat;
    background-size: 100% 100%;
    
}
.a2{
    background: url("../images/sm-about-service21.jpg") no-repeat;
    background-size: 100% 100%;
    
}
.a3{
    background: url("../images/sm-about-service31.jpg") no-repeat;
    background-size: 100% 100%;
    
}
.a4{
    background: url("../images/sm-about-service41.jpg") no-repeat;
    background-size: 100% 100%;
    
}

a:hover{
    text-decoration: none;
    
    
}

.a1,.a3,.a2,.a4{
     display: block;
     position: relative;
     color: #fff;
}
.a1,.a3{color:#fff;}
div.t_title{
    
    position: absolute ;
    left: 50%;
     transform: translateX(-50%);
     opacity: 1;
     transition: all .5s linear;
    margin-top: 28px;
	width:160px;
}
div.t_title>p{
	margin-top:5px;
	width:100%;
}
div.t_title>h3{
	width:100%;
}
.pp{
    color: #fff;
    height: 300px;
    background-color: red;
    opacity: 0;
    width: 100%;
    padding-top: 40px;
    transition: all .5s linear;
    
}
.pp>p{
 padding-left: 30%;
 text-align: left;
 margin-top:5px;
 font-size:14px;
}
@media screen and (max-width: 768px){
 .pp{
     height: 200px;
 }
 .push_{
     padding: 5px;
 }
 div.t_title{
     width: 100%;
     margin-top: 10px;
 }
 .t_title>h3{
     font-size: 14px;

 }
 .t_title>p{
     font-size: 12px;
 }
 .h2_title{
     font-size: 18px;
     font-weight: 600;
 }
}